<template>
  <div class="account">
    <div class="user-data-item">
      <div class="user-data">
        <div class="avatar">
          <img :src="userInfo.headImg || 'https://xmjob.oss-cn-hangzhou.aliyuncs.com/life/20201022/20201022111406.png'"  alt="" width="100%" height="100%" >
        </div>
        <div class="data">
          <ul>
            <li><em>{{userInfo.name}}</em><small>{{userInfo.isHideName | isHideName}}</small></li>
            <li>
              现居住: {{userInfo.currentAddress}} │ 工作经验: {{userInfo.workExperienceDesc}} │ {{userInfo.sex == 1 ? '男' : '女'}} │ {{defaultResume.resumeIntentions.currentState ==1 ? "在职" : "离职" }}
            </li>
            <li>
              <span><i class="icon-phone"></i>{{userInfo.phone}}</span>
              <span><i class="icon-email"></i>{{userInfo.email}}</span>
            </li>
          </ul>
        </div>
        <div class="tool" v-if="resumeId > 0">
          <button @click="refresh"><i class="icon-refresh"></i>刷新简历</button>
          <router-link :to="resume_data.type == 1 ? '/resume?id='+resumeId : '#'"><button><i class="icon-edit"></i>编辑简历</button></router-link>
        </div>
        <div class="tool" v-else>
          <router-link :to="'/account/myResume'"><button><i class="icon-edit"></i>添加简历</button></router-link>
        </div>
      </div>

      <div class="data-info">
        <ul>
          <li>
            <em>{{ Math.round(resume_data.complete) || 0 }}%</em>
            <small>简历完整度</small>
          </li>
          <li>
            <em>{{ resume_data.postApplied || 0 }}</em>
            <small>已申请职位</small>
          </li>
          <li>
            <em>{{ resume_data.interviewInvitation || 0 }}</em>
            <small>面试邀请</small>
          </li>
          <li>
            <em>{{ resume_data.attention || 0 }}</em>
            <small>关注我的</small>
          </li>
        </ul>
      </div>
    </div>

    <div class="recommend">
      <h3><em>推荐职位</em><span @click="other">换一批</span></h3>

      <ul>
        <li v-for="(item, index) in recommendList" :key="index">
          <router-link :to="'/internship-detail/'+item.id">
          <div class="icon"><img :src="item.companyLogo" width="100%" height="100%"></div>
          <div class="office">
            <div class="title">{{item.jobTitle}}</div>
            <div class="salary">{{item.salaryStart || 0}}k - {{item.salaryEnd || 0}}k</div>
            <div class="depict">{{item.companyName}}</div>
          </div>
          </router-link>
        </li>
      </ul>
    </div>

    <div class="policy">
      <h3><em>政策推荐</em></h3>

      <dl>
        <dt v-if="resumeId>0 && resume_data.type == 1">
          <span>期望工作地点：{{defaultResume.resumeIntentions.workArea || '未填写'}}</span>
          <!-- <span>期望薪资：{{defaultResume.resumeIntentions.expectSalary}}</span> -->
          <span>最高学历：{{defaultResume.resumeInfos.highestEducationDesc || '未填写'}}</span>
        </dt>

        <dd v-for="(item, index) in policyList" :key="index">
          <router-link :to="'/policy/details?id='+item.id"> {{ item.title }} <span>{{parseTime(new Date(item.updateTime) , '{y}-{m}-{d} {h}:{i}:{s}')}}</span> </router-link>
        </dd>
      </dl>

      <router-link to="/policy"><button>查看全部</button></router-link>
    </div>
  </div>
</template>


<script>
import { findRecommendPolicyList, default_resume, updateDefaultResume, findResumes, getAccountInfoById} from "@/api/me/account";
import { findRecommendedPositionList } from "@/api/jobs";
import { getResume } from "@/api/me/resume";
export default {
  name: "userInfo",
  data() {
    return {
      resume_data: {},
      defaultResume:{
        resumeIntentions: {},
        resumeInfos:{}
      },
      recommend_req: {
        limit: 10,
        page: 1,
      },
      recommendList: [],
      recommendCount: 1,
      policyList: [],
      resumeId: 0,
      navIndex:'',
      userInfo: [],
    }
  },
  watch:{

  },
  mounted() {
    this.getAccountInfo()
    this.resume();
    this.policy();
    this.$emit('navIndex', 1);
  },
  filters: {
		isHideName(val){
			if(val == 1){
				return "完全公开"
			}else if(val == 2){
				return "显示编号"
			}else{
				return "隐藏名字"
			}
		}
  },
  methods: {
    handleClose(done) {},
    getAccountInfo(){
				let data = {'id' : this.$store.getters.accountid}
				getAccountInfoById(data).then(res => {
          if(res.resp_code == 0){
            if(res.datas.name == "" || res.datas.name == null){

              this.$alert('您还没有添加基本资料,请先添加', '提示', {
                confirmButtonText: '前去添加',
                callback: action => {
                  this.$router.push('/account/basicInfo');
                }
              });

            }
            this.userInfo = res.datas;
          }
				}).catch(err => {
					this.$message.error(err);
				})
    },
    resume() {
      default_resume().then((res) => {
          if (res.resp_code == 0) {
              this.resume_data = res.datas;

              //没有id就是没有简历
              if(res.datas.id){
                if(res.datas.type == 1){
                    this.resumeId = res.datas.id; 
                    getResume({id : res.datas.id}).then((res)=>{
                      this.defaultResume.resumeIntentions = res.datas.resumeIntentions[0]
                      this.defaultResume.resumeInfos 		= res.datas.resumeInfos[0]
                    }).catch((err) => {
                      console.log(err);
                    });
                }
              }
              // else{
              //   this.$confirm('您还没有添加简历,请前去个人中心添加', '提示', {
              //       confirmButtonText: '前去添加',
              //       cancelButtonText: '稍后添加',
              //       type: 'warning'
              //   }).then(() => {
              //           this.$router.push('/account/myResume');
              //   }).catch(() => {
  
              //   });
              // }
              this.recommend();
          } else {
            this.msgWarn(res.resp_msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
	},
	other(){
		let crr = Math.round(Math.random() * this.recommendCount);
		crr = (crr == 0 ) ? 1 : crr;
		this.recommend(crr);
	},
    refresh() {
      updateDefaultResume({ resumeId: this.resumeId })
        .then((res) => {
          if (res.resp_code == 0) {
            this.msgSuccess(res.resp_msg);
          } else {
            this.msgWarn(res.resp_msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
	edit(){},
    recommend(crr) {
      	crr = crr || 1;
      	findRecommendedPositionList({ limit: 9, page: crr }).then((res) => {
          this.recommendList = res.data;
          this.recommendCount = Math.ceil(res.total / res.count)
        }).catch((err) => {
          	console.log(err);
        });
    },
    policy() {
      findRecommendPolicyList(this.recommend_req)
        .then((res) => {
          if (res.code == 0) {
            this.policyList = res.data;
          } else {
            this.msgWarn(res.msg);
          }
        }).catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.account {
  float: right;
  width: 970px;
}
.user-data-item {
  width: 100%;
  height: 300px;
  background-color: #fff;
  padding: 35px 50px;
  .user-data {
    overflow: hidden;
    & > div {
      float: left;
    }
    .avatar {
      width: 80px;
      height: 102px;
      // background: url(../../assets/image/avatar.png) no-repeat;
    }
    .data {
      width: 600px;
      margin-left: 25px;

      li {
        font-size: 14px;
        font-weight: 400;
        color: #787878;
        line-height: 35px;

        span {
          width: 185px;
          display: inline-block;
          i {
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 5px;
            margin-bottom: -3px;
            &.icon-phone {
              background: url(../../assets/image/icon-phone.png) no-repeat;
            }
            &.icon-email {
              margin-bottom: -5px;
              background: url(../../assets/image/icon-email.png) no-repeat;
            }
          }
        }
      }
      em {
        display: inline-block;
        font-size: 20px;
        font-weight: 400;
        color: #121212;
        font-style: normal;
      }
      small {
        display: inline-block;
        width: 60px;
        height: 20px;
        line-height: 20px;
        background: #5ea08e;
        border-radius: 2px;
        font-size: 10px;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        margin-left: 10px;
        margin-top: -10px;
      }
    }
    .tool {
      float: right;
      button {
        cursor: pointer;
        outline: none;
        display: block;
        width: 110px;
        height: 36px;
        color: #fff;
        background: #000;
        border: 0;
        width: 110px;
        background: #3eacc4;
        border-radius: 4px;
        margin-bottom: 10px;
        font-size: 14px;

        &:last-child {
          color: #3eabc4;
          background-color: #fff;
          border: 1px solid #3eacc4;
          border-radius: 4px;
        }

        i {
          display: inline-block;
          margin-bottom: -2px;
          margin-right: 5px;
          &.icon-refresh {
            width: 19px;
            height: 15px;
            background: url(../../assets/image/icon-refresh.png) no-repeat;
          }
          &.icon-edit {
            width: 14px;
            height: 16px;
            background: url(../../assets/image/icon-edit.png) no-repeat;
          }
        }
      }
    }
  }

  .data-info {
    margin-top: 50px;
    ul {
      overflow: hidden;
      li {
        text-align: center;
        float: left;
        margin-left: (152/2) + px;
        margin-right: (152/2) + px;
        em {
          font-style: normal;
          font-size: 26px;
          font-weight: 400;
          color: #ce3a5c;
          line-height: 30px;
          display: block;
        }
        small {
          font-size: 14px;
          font-weight: 400;
          color: #787878;
          line-height: 30px;
        }
      }
    }
  }
}
.policy,
.recommend {
  background-color: #fff;
  width: 100%;
  margin-top: 20px;
  padding: 35px;

  h3 {
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
    em {
      float: left;
      display: block;
      font-style: normal;
      width: 65px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      font-weight: bold;
      color: #3eabc4;
      border-bottom: 2px solid #3eabc4;
    }
    span {
      float: right;
      font-size: 14px;
      font-weight: 400;
      color: #787878;
      cursor: pointer;
      margin-top: 10px;
    }
  }

  ul {
    margin-top: 25px;
    overflow: hidden;
    li {
      width: 290px;
      height: 108px;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      overflow: hidden;
      float: left;
      margin-top: 5px;
      margin-bottom: 5px;
      .icon {
        margin: 22px;
        width: 64px;
        height: 64px;
        background: #ffffff;
        border: 1px solid #e8e8e8;
        float: left;
        margin-right: 15px;
      }
      .office {
        float: left;
        margin-top: 22px;
        .title {
          color: #121212;
          font-size: 16px;
        }
        .salary {
          color: #ce3a5c;
          margin-top: 7px;
          margin-bottom: 7px;
        }
        .depict {
          font-size: 14px;
          font-weight: 400;
          color: #787878;
        }
      }

      &:nth-child(3n-1) {
        margin: 5px 13px;
      }
    }
  }

  dl {
    margin-top: 30px;
    dt {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #f4f4f4;
      padding-left: 20px;
      span {
        width: 150px;
        font-size: 14px;
        font-weight: 400;
        color: #343434;
        line-height: 48px;
        margin-right: 60px;
      }
    }

    dd {
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #f0f0f0;

      span {
        float: right;
      }
    }
  }

  button {
    margin-top: 40px;
    width: 100px;
    height: 36px;
    background: #3eacc4;
    border-radius: 4px;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
}
</style>